<template>
  <div
    style="
      width: 100%;
      height: 100%;
      background-color: azure;
      text-align: center;
    "
  >
    <!-- 
      对话框
   -->
    <el-dialog v-model="dialogAlterState" title="Warning" width="500" center>
      <h3><span> 修改界面 </span></h3>
      <template #footer>
        <!-- 
          这里应该绑定一个函数 用于向后端发送数据
         -->
        <!-- 
            数据绑定
        -->

        <!-- 文字描述 -->
        <el-text class="mx-1" type="primary">教师课程id</el-text>
        <!-- 输入框 -->
        <el-input
          v-model="alterTeacherClassesId"
          style="width: 150px"
          placeholder=""
        /><br />
        <!-- 文字描述 -->
        <el-text class="mx-1" type="primary">班级id</el-text>
        <!-- 输入框 -->
        <el-input
          v-model="alterClassesId"
          style="width: 150px"
          placeholder=""
        /><br />

        <!-- 文字描述 -->
        <el-text class="mx-1" type="primary">课程id</el-text>
        <!-- 输入框 -->
        <el-input
          v-model="alterSubjectId"
          style="width: 150px"
          placeholder=""
        />
        <br />


        <div class="dialog-footer">
          <el-button type="primary" @click="sendAlterInfo"> 修改 </el-button>
          <el-button @click="dialogAlterState = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- dialogAddState -->
    <el-dialog v-model="dialogAddState" title="Warning" width="500" center>
      <h3><span> 新增界面 </span></h3>
      <template #footer>
        <div class="dialog-footer">
    
          <!-- 文字描述 -->
          <el-text class="mx-1" type="primary">课程id</el-text>
          <!-- 输入框 -->
          <el-input
            v-model="addSubjectId"
            style="width: 150px"
            placeholder="课程id"
          />
          <br />
          <!-- 文字描述 -->
          <el-text class="mx-1" type="primary">教师id</el-text>
          <!-- 输入框 -->
          <el-input
            v-model="addClassesId"
            style="width: 150px"
            placeholder="教师id"
          />
          <br />

          <el-button type="primary" @click="sendAddInfo"> 新增 </el-button>
          <el-button @click="dialogAddState = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="SearchStyle">
      <el-text class="mx-1" type="primary">教师课程id</el-text>
      <!-- 输入框 -->
      <el-input
        v-model="queryTeacherClassesId"
        style="width: 150px"
        placeholder="输入教师课程id"
      />

      <el-text class="mx-1" type="primary">教师id</el-text>
      <!-- 输入框 -->
      <el-input
        v-model="queryClassesId"
        style="width: 150px"
        placeholder="输入教师id"
      />
      
      <el-text class="mx-1" type="primary">课程id</el-text>
      <!-- 输入框 -->
      <el-input
        v-model="querySubjectId"
        style="width: 150px"
        placeholder="输入课程id"
      />


      <!-- 搜索按钮 -->
      <el-button type="primary" @click="queryInfo" plain>查询</el-button>
      <el-button type="primary" @click="addInfo" plain>新增</el-button>
    </div>
    <div class="ShowTableContent">
      <el-table :data="adminScoreInfoList" style="width: 100%" max-height="650">
        <el-table-column
          fixed
          prop="teacherSubjectId"
          label="教师课程id"
          width="150"
        />
        <el-table-column prop="teacherId" label="教师id" width="120" />
        <el-table-column prop="subjectId" label="课程id" width="120" />
        
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="deleteInfo(scope.$index)"
            >
              删除
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="alterInfo(scope.$index)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="PageStyle">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="counts"
        :page-size="pageSize"
        :current-page="pageNow"
        @current-change="pageChange"
        class="PageC"
      />
    </div>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import request from "../axios/axios.js";
import { ElMessage } from "element-plus";
//声明数据变量
//这个是从后端返回的结果
let adminScoreInfoList = ref([]);
//发送axios请求就完事了

//查询数据相关参数
let queryTeacherClassesId=ref('')
let queryClassesId=ref('')
let querySubjectId=ref("")
//增加相关参数
let addTeacherClassesId=ref('')
let addClassesId=ref('')
let addSubjectId=ref("")


//修改相关参数
let alterTeacherClassesId=ref('')
let alterClassesId=ref('')
let alterSubjectId=ref("")


/**
 * 页面相关的东西
 */
//总数
let counts = 0;
//页面大小
let pageSize = 10;
//当前是第几页
let pageNow = 1;
//页面总数
let pageCounts = 1;
//对话框
let dialogAddState = ref(false);
let dialogAlterState = ref(false);

//页数改变查询
async function pageChange(number) {
  pageNow = number;
  queryInfo();
}

//声明方法
async function queryInfo() {
  console.log("查询方法");
  console.log("当前页数:" + pageNow);
  //向后端发送数据
  let { data } = await request.post("/subject/teacher/base/query", {
    page: pageNow,
    pageSize: pageSize,

    teacherClassesId:queryTeacherClassesId.value,
    teacherId:queryClassesId.value,
    subjectId:querySubjectId.value

  });
  console.log(data);

  if ((data.code = 200)) {
    ElMessage({
        message: "查询成功",
        type: "success"
      });
    adminScoreInfoList.value = data.data;

    //页数的设置
    counts = data.countTotal;
    pageNow = data.page;
    pageCounts = data.pageTotal;
  }
}
function addInfo() {
  console.log("新增方法");
  //弹出对话框
  dialogAddState.value = true;
  //
}
async function deleteInfo(index) {
  console.log("删除方法");
  console.log(index);
  //既然这里传的是索引        那么 直接索引取数组里面的值发给后端就可以了
  console.log(adminScoreInfoList.value[index]);
  let info = adminScoreInfoList.value[index];
  //像后端发送数据
  let { data } = await request.post("/subject/teacher/base/delete", {
    //像后端发送数据

    scoreId: info.scoreId,
  });
  if (data.code == 200) {
    alert("删除成功");
    //调用查询方法
    queryInfo();
  } else {
    alert("删除失败");
  }
}
function alterInfo(index) {
  console.log("修改方法");
  console.log(index);
  console.log(adminScoreInfoList[index]);
  //数据更新
  let info = adminScoreInfoList.value[index];
  dialogAlterState.value = true;

  //数据设置到模板

  alterTeacherClassesId.value=info.teacherClassesId
  alterClassesId.value=info.teacherId
  alterSubjectId.value = info.subjectId

  //弹出对话框

  //在对话框中修改数据 并且发送数据 这就是alter对话框的功能了
}

async function sendAlterInfo() {
  dialogAlterState.value = false;
  //发送修改数据
  let { data } = await request.post("/subject/teacher/base/update", {
    teacherClassesId:alterTeacherClassesId.value,
    teacherId:alterClassesId.value,
    subjectId:alterSubjectId.value
  });
  if (data.code == 200) {
    alert(data.message);
    //查询数据
    queryInfo();
  } else {
    alert("添加失败");
  }
}
async function sendAddInfo() {
  dialogAddState.value = false;

  let { data } = await request.post("/subject/teacher/base/insert", {
    //发送axios请求
    teacherId:addClassesId.value,
    subjectId:addSubjectId.value
  });
  if (data.code == 200) {
    alert(data.message);
    //
    queryInfo();
  } else {
    alert("添加失败");
  }
}

onMounted(()=>{
  queryInfo()
})
</script>
  
<style>
.SearchStyle {
  width: 100%;
  height: 20%;
}
.ShowTableContent {
  width: 100%;
  height: 646px;
}
.PageStyle {
  display: flex;
  align-items: center;
}
</style>